<template>
  <div>
    <!-- 公用组件Logo -->
    <logo></logo>
    <!-- 联系方式 -->
    <div class="contactFang">
      <span class="contact">如有疑问请联系客户经理</span>
      <p class="manager">
        <span class="name">{{ saleId666 }}</span>
        <span class="telephone">{{ salePhone }}</span>
      </p>
    </div>
    <div class="content">
      <!-- 大数据教学平台 -->
      <div class="teaching-platform or"
        :class="{'teaching-platform1':myType==1,'teaching-platform2':myType==2}">
        <!-- 开通账号 -->
        <div class="opening" v-if="teachingAddAccounts.length != 0">
          <div class="content-div orOne">
            <p class="list" v-for="(item, index) in teachingAddAccounts" :key="index">
              <span class="account">账号：</span>
              <span class="number" :title="item.userNum">{{
                item.userNum | ellipsis
              }}</span>
              <span class="copy" @click="copy(1, index)">复制</span>
            </p>
          </div>
          <a :href="urls.jx" target="_blank" style="color: #000">
            <p class="getInto" @click="getInto()">进入系统</p>
          </a>
        </div>
        <!-- 没开通账号 -->
        <div class="no-opening" v-else>
          <img src="../../assets/images/locking.png" alt="" />
          <p>您未开通账号，请联系客户经理</p>
        </div>
      </div>
      <!-- 大数据实训平台 -->
      <div class="training-platform or">
        <!-- 开通账号 -->
        <div class="opening" v-if="trainingAddAccounts.length != 0">
          <div class="content-div orTow">
            <p class="list" v-for="(item, index) in trainingAddAccounts" :key="index">
              <span class="account">账号：</span>
              <span class="number" :title="item.userNum">{{
                item.userNum | ellipsis
              }}</span>
              <span class="copy" @click="copy(2, index)">复制</span>
            </p>
          </div>
          <a :href="urls.sx" target="_blank" style="color: #000">
            <p class="getInto" @click="getInto()">进入系统</p>
          </a>
        </div>
        <!-- 没开通账号 -->
        <div class="no-opening" v-else>
          <img src="../../assets/images/locking.png" alt="" />
          <p>您未开通账号，请联系客户经理</p>
        </div>
      </div>
      <!-- 虚拟仿真平台 -->
      <div class="xnfz-platform or">
        <!-- 开通账号 -->
        <div class="opening" v-if="emulatorAddAccounts.length != 0">
          <div class="content-div orFive">
            <p class="list" v-for="(item, index) in emulatorAddAccounts" :key="index">
              <span class="account">账号：</span>
              <span class="number" :title="item.userNum">{{
                item.userNum | ellipsis
              }}</span>
              <span class="copy" @click="copy(3, index)">复制</span>
            </p>
          </div>
          <a :href="urls.fz" target="_blank" style="color: #000">
            <p class="getInto" @click="getInto()">进入系统</p>
          </a>
        </div>
        <!-- 没开通账号 -->
        <div class="no-opening" v-else>
          <img src="../../assets/images/locking.png" alt="" />
          <p>您未开通账号，请联系客户经理</p>
        </div>
      </div>
      <!-- 智联网平台 -->
      <div class="zlw-platform or">
        <!-- 开通账号 -->
        <div class="opening" v-if="mhlAddAccounts.length != 0">
          <div class="content-div orSix">
            <p class="list" v-for="(item, index) in mhlAddAccounts" :key="index">
              <span class="account">账号：</span>
              <span class="number" :title="item.userNum">{{
                item.userNum | ellipsis
              }}</span>
              <span class="copy" @click="copy(6, index)">复制</span>
            </p>
          </div>
          <a :href="urls.zl" target="_blank" style="color: #000">
            <p class="getInto" @click="getInto()">进入系统</p>
          </a>
        </div>
        <!-- 没开通账号 -->
        <div class="no-opening" v-else>
          <img src="../../assets/images/locking.png" alt="" />
          <p>您未开通账号，请联系客户经理</p>
        </div>
      </div>
      <!-- 大数据科研平台 -->
      <div class="scientific-research-platform or"
        :class="{'scientific-research-platform1':myType==1,'scientific-research-platform2':myType==2}">
        <!-- 开通账号 -->
        <div class="opening" v-if="scientificAddAccounts.length != 0">
          <div class="content-div orThree">
            <p class="list" v-for="(item, index) in scientificAddAccounts" :key="index">
              <span class="account">账号：</span>
              <span class="number" :title="item.userNum">{{
                item.userNum | ellipsis
              }}</span>
              <span class="copy" @click="copy(4, index)">复制</span>
            </p>
          </div>
          <a :href="urls.ky" target="_blank" style="color: #000">
            <p class="getInto" @click="getInto()">进入系统</p>
          </a>
        </div>
        <!-- 没开通账号 -->
        <div class="no-opening" v-else>
          <img src="../../assets/images/locking.png" alt="" />
          <p>您未开通账号，请联系客户经理</p>
        </div>
      </div>
      <!-- 数据管理系统 -->
      <div class="data-management or">
        <!-- 开通账号 -->
        <div class="opening" v-if="managementAddAccounts.length != 0">
          <div class="content-div orFour">
            <p class="list" v-for="(item, index) in managementAddAccounts" :key="index">
              <span class="account">账号：</span>
              <span class="number" :title="item.userNum">{{
                item.userNum | ellipsis
              }}</span>
              <span class="copy" @click="copy(5, index)">复制</span>
            </p>
          </div>
          <a :href="urls.gl" target="_blank" style="color: #000">
            <p class="getInto" @click="getInto()">进入系统</p>
          </a>
        </div>
        <!-- 没开通账号 -->
        <div class="no-opening" v-else>
          <img src="../../assets/images/locking.png" alt="" />
          <p>您未开通账号，请联系客户经理</p>
        </div>
      </div>
      
    </div>
  </div>
</template>

<script>
import Logo from '../../components/Logo.vue'

import Clipboard from 'clipboard'
export default {
  components: {
    Logo
  },
  data () {
    return {
      myType: '',
      urls: {
        // 大数据教学平台
        jx: `http://112.103.254.249:60008/login`,
        // 大数据实训平台
        // sx: `http://112.103.254.249:60011/login`,
        sx: `http://112.103.254.249:20803/login`,
        // 人工智能虚拟仿真平台
        fz: `http://112.103.254.249:56090/login`,
        // 大数据科研平台
        ky: `http://112.103.254.249:58080/tempo/login.jsp`,
        // 数据管理系统
        gl: `http://47.95.243.56//signin`,
        // 智联网
        zl: `http://112.103.254.249:20801/Teaching/index`
      },
      value: '',
      schoolName: '',
      saleId666: '',
      saleId: '',
      salePhone: '',
      teachingAddAccounts: [],
      trainingAddAccounts: [],
      scientificAddAccounts: [],
      managementAddAccounts: [],
      // 虚拟仿真
      emulatorAddAccounts: [],
      // 智联
      mhlAddAccounts: []
    }
  },
  // 靳春野过滤器filter，判断文字过长而显示省略号
  filters: {
    ellipsis (value) {
      if (!value) return ''
      if (value.length > 11) {
        return value.slice(0, 11) + '...'
      }
      return value
    }
  },
  created () {
    // console.log(decodeURIComponent(this.getQueryString('schoolName')),326)
    // console.log(this.getQueryString('schoolName'),3262222222222222)
    // var utff = this.getQueryString('schoolName')
    // console.log(utff,3263333333)
    // this.getCharFromUtf8(utff)
    // console.log(this.getCharFromUtf8(utff),9999999999999999)

    // this.getCharFromUtf8(utff)
    // this.utf8ToChar(utff)
    // console.log(this.getCharFromUtf8(utff),this.utf8ToChar(utff))
    // this.Change(utff)
    // encodeURI(encodeURI(utff))
    // console.log(unescape("%u5F20"),111111111111)
    // console.log(unescape("%3F%3F%3F"),111111111111)
    // console.log(decodeURIComponent(utff),2323232323)
    // this.saleId = this.$route.query.saleId
    // this.schoolName   = this.getQueryVariable("schoolName")
    // this.saleId   = this.getQueryVariable("saleId")
    // this.salePhone   = this.getQueryVariable("salePhone")
    // console.log(window.location.href)

    this.salePhone = this.$route.query.salePhone
    this.saleId = this.$route.query.saleId
    this.schoolName = this.$route.query.schoolName

    // console.log(String(this.$route.query.schoolName),33333333333333)
    // console.log(this.$route.query.schoolName,33333333333333)

    // console.log(this.$route.query.saleId,111)
    // this.elasticLayout()
    // this.infoData()
    this.infoData()
  },
  methods: {
    // Change(pValue) {
    //     return pValue.replace(/[^\u0000-\u00FF]/g, function($0) {
    //         return escape($0).replace(/(%u)(\w{4})/gi, "&#x$2;")
    //     });
    // },
    // // name 是你要获取的那个参数的字段 比如 code=我是谁 name 就是 code
    // getQueryString (name) {
    //     var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
    //     var r = window.location.search.substr(1).match(reg)
    //     if (r !== null) return r[2]
    //     return null
    // },
    // //将编码转换成字符
    // utf8ToChar(str) {
    //     var iCode, iCode1, iCode2;
    //     iCode = parseInt("0x" + str.substr(1, 2));
    //     iCode1 = parseInt("0x" + str.substr(4, 2));
    //     iCode2 = parseInt("0x" + str.substr(7, 2));
    //     return String.fromCharCode(((iCode & 0x0F) << 12) | ((iCode1 & 0x3F) << 6) | (iCode2 & 0x3F));
    // },

    // //将URL中的UTF-8字符串转成中文字符串
    // getCharFromUtf8(str) {
    //     var cstr = "";
    //     var nOffset = 0;
    //     if (str == "")
    //         return "";
    //     str = str.toLowerCase();
    //     nOffset = str.indexOf("%e");
    //     if (nOffset == -1)
    //         return str;
    //     while (nOffset != -1) {
    //         cstr += str.substr(0, nOffset);
    //         str = str.substr(nOffset, str.length - nOffset);
    //         if (str == "" || str.length < 9)
    //             return cstr;
    //         cstr += utf8ToChar(str.substr(0, 9));
    //         str = str.substr(9, str.length - 9);
    //         nOffset = str.indexOf("%e");
    //     }
    //     return cstr + str;
    // },
    // getQueryVariable(variable){
    //     var query = window.location.search.substring(1);
    //     var vars = query.split("&");
    //     for (var i=0;i<vars.length;i++) {
    //             var pair = vars[i].split("=");
    //             if(pair[0] == variable){return pair[1];}
    //     }
    //     return(false);
    // },
    // 复制功能
    copy (type, index) {
      if (type == 1) {
        this.value = this.teachingAddAccounts[index].userNum
      } else if (type == 2) {
        this.value = this.trainingAddAccounts[index].userNum
      } else if (type == 3) {
        this.value = this.emulatorAddAccounts[index].userNum
      } else if (type == 4) {
        this.value = this.scientificAddAccounts[index].userNum
      } else if (type == 5) {
        this.value = this.managementAddAccounts[index].userNum
      } else if (type == 6) {
        this.value = this.mhlAddAccounts[index].userNum
      }
      // emulatorAddAccounts
      // mhlAddAccounts
      const input = document.createElement('input') // 这里的逻辑就是新建立一个input标签，
      document.body.appendChild(input) // 把input添加到body中
      input.setAttribute('value', this.value) // 设置input的value值，this.hd3href
      input.select() // select 选中input里面的所有文本内容
      document.execCommand('Copy') // 执行浏览器复制命令
      this.$message({
        // 提示消息
        message: '复制成功',
        type: 'success'
      })
      document.body.removeChild(input) // 最近需要销毁
    },
    // 点击进入系统按钮
    getInto () {
      // console.log(jia[0].number);
    },
    // 计算如果账号数量小于三个，使用弹性布局
    //     elasticLayout(){
    //         let list = this.teachingAddAccounts
    //         console.log(list.length,987456)
    //         if( list.length < 3 ){
    //             $(function(){
    //                 $('.content-div').css({
    //                     "display": "-webkit-flex",
    //                     "display": "flex",
    //                     /*三个div被挤到中间了*/
    //                     "align-content": "center",
    //                     /*以中间划一条线，前两个div在这条线的上面居中，后面一个div在这条线的下面居中*/
    //                     /* align-items: center,  */
    //                     "flex-wrap": "wrap",
    //                 });
    //                 console.log(list.length);
    //             });
    //         }
    //     },
    // 数据
    infoData () {
      let self = this
      self.$axios
        .get(`/school/queryDecodeSchoolInfoById?encodeSchoolName=${self.schoolName}`)
        .then((response) => {
          let res = response.data
          if (res.code === 200) {
            self.myType = res.data.type
            self.saleId666 = res.data.sale_id
            // 教学
            self.teachingAddAccounts = res.data.teachingAddAccounts
            // 实训
            self.trainingAddAccounts = res.data.trainingAddAccounts
            // 科研
            self.scientificAddAccounts = res.data.scientificAddAccounts
            // 数据
            self.managementAddAccounts = res.data.managementAddAccounts
            // 虚拟仿真
            self.emulatorAddAccounts = res.data.emulatorAddAccounts
            // 智联
            self.mhlAddAccounts = res.data.mhlAddAccounts
            console.log(res.data.teachingAddAccounts.length, 12)
            if (res.data.teachingAddAccounts.length < 3) {
              $(function () {
                $('.orOne').css({
                  display: '-webkit-flex',
                  display: 'flex' /* 三个div被挤到中间了 */,
                  'align-content':
                    'center' /* 以中间划一条线，前两个div在这条线的上面居中，后面一个div在这条线的下面居中 */ /* align-items: center,  */,
                  'flex-wrap': 'wrap'
                })
                console.log(res.data.teachingAddAccounts.length, 12)
              })
            }
            if (res.data.trainingAddAccounts.length < 3) {
              $(function () {
                $('.orTow').css({
                  display: '-webkit-flex',
                  display: 'flex' /* 三个div被挤到中间了 */,
                  'align-content':
                    'center' /* 以中间划一条线，前两个div在这条线的上面居中，后面一个div在这条线的下面居中 */ /* align-items: center,  */,
                  'flex-wrap': 'wrap'
                })
              })
            }
            if (res.data.scientificAddAccounts.length < 3) {
              $(function () {
                $('.orThree').css({
                  display: '-webkit-flex',
                  display: 'flex' /* 三个div被挤到中间了 */,
                  'align-content':
                    'center' /* 以中间划一条线，前两个div在这条线的上面居中，后面一个div在这条线的下面居中 */ /* align-items: center,  */,
                  'flex-wrap': 'wrap'
                })
              })
            }
            if (res.data.managementAddAccounts.length < 3) {
              $(function () {
                $('.orFour').css({
                  display: '-webkit-flex',
                  display: 'flex' /* 三个div被挤到中间了 */,
                  'align-content':
                    'center' /* 以中间划一条线，前两个div在这条线的上面居中，后面一个div在这条线的下面居中 */ /* align-items: center,  */,
                  'flex-wrap': 'wrap'
                })
              })
            }
            // 虚拟仿真
            if (res.data.emulatorAddAccounts.length < 3) {
              $(function () {
                $('.orFive').css({
                  display: '-webkit-flex',
                  display: 'flex' /* 三个div被挤到中间了 */,
                  'align-content':
                    'center' /* 以中间划一条线，前两个div在这条线的上面居中，后面一个div在这条线的下面居中 */ /* align-items: center,  */,
                  'flex-wrap': 'wrap'
                })
              })
            }
            // 智联
            if (res.data.mhlAddAccounts.length < 3) {
              $(function () {
                $('.orSix').css({
                  display: '-webkit-flex',
                  display: 'flex' /* 三个div被挤到中间了 */,
                  'align-content':
                    'center' /* 以中间划一条线，前两个div在这条线的上面居中，后面一个div在这条线的下面居中 */ /* align-items: center,  */,
                  'flex-wrap': 'wrap'
                })
              })
            }
          } else {
            self.$notify({
              type: 'danger',
              message: res.message
            })
          }
        })
    }
  }
}
</script>

<style lang="scss" scoped>
/* 经理信息 */
.contactFang {
  height: 60px;
  position: absolute;
  top: 20px;
  right: 15%;
  color: #fff;
  .contact {
    font-size: 14px;
    float: left;
    position: relative;
  }
  .manager {
    height: 30px;
    border: 1px solid #868686;
    border-radius: 20px;
    position: relative;
    margin-left: 24px;
    bottom: 6px;
    float: left;
    padding: 0 17px 0 0;
    .name {
      font-size: 16px;
      font-weight: bold;
      line-height: 30px;
      margin-left: 20px;
    }
    .telephone {
      font-size: 16px;
      font-weight: bold;
      line-height: 30px;
      margin-left: 12px;
    }
  }
}
.content {
  width: 1200px;
  height: 620px;
  position: relative;
  margin: 0 auto;
  margin-top: 50px;
  /* 大数据教学平台 */
  .teaching-platform {
    position: relative;
    margin: 0 10px 10px 0;
    overflow: hidden;
  }
  .teaching-platform1 {
    background: url("../../assets/images/teaching-platform1.png") no-repeat;
  }
  .teaching-platform2 {
    background: url("../../assets/images/teaching-platform2.png") no-repeat;
  }
  /* 大数据实训平台 */
  .training-platform {
    background: url("../../assets/images/training-platform1.png") no-repeat;
    position: relative;
    margin: 0 10px 10px 0;
    overflow: hidden;
  }
  /* 虚拟仿真平台 */
  .xnfz-platform {
    background: url("../../assets/images/xnfz.png") no-repeat;
    position: relative;
    margin: 0 0 10px 0;
    overflow: hidden;
  }
  /* 大数据科研平台 */
  .scientific-research-platform {
    position: relative;
    margin: 0 10px 0 0;
    overflow: hidden;
  }
  //1
  .scientific-research-platform1{
    background: url("../../assets/images/scientific-research-platform1.png") no-repeat;
  }
  .scientific-research-platform2{
    background: url("../../assets/images/scientific-research-platform2.png") no-repeat;
  }
  /* 数据管理系统 */
  .data-management {
    background: url("../../assets/images/data-management.png") no-repeat;
    margin: 0 0 0 0;
    overflow: hidden;
  }
  /* 智联网平台 */
  .zlw-platform {
    background: url("../../assets/images/xsk.jpg") no-repeat;
    position: relative;
    margin: 0 10px 0 0;
    overflow: hidden;
  }
  .or {
    width: 390px;
    height: 200px;
    float: left;
    position: relative;
    background-size: 100% 100%;
  }
  /* 开通账号 */
  .opening {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 390px;
    height: 200px;
    float: right;
    /* opacity: .5; */
    background: rgba(0, 0, 0, .7);
    position: relative;
    opacity: 0;
    transition: 1s;
    transform: translateX(300px);
    .content-div {
      width: 216px;
      height: 104px;
      position: relative;
      // margin-top: 65px;
      margin-left: 30px;
      overflow: overlay;
      .list {
        // width: 216px;
        line-height: 35px;
        color: #fff;
        font-size: 14px;
        .account {
          // font-size: 16px;
        }
        .number {
          // font-size: 16px;
        }
        .copy {
          font-size: 12.5px;
          border: 1px solid #fff;
          border-radius: 10px;
          padding: 2px 7px;
          cursor: pointer;
          &:hover {
            color: #000;
            background: #fff;
          }
        }
      }
      .list:nth-child(1) {
        margin-top: 5px;
      }
    }
    > a {
      display: block;
      min-width: 150px;
      &::before {
        content: "";
        position: absolute;
        top: 76px;
        display: block;
        width: 1px;
        height: 49px;
        background: rgba(255, 255, 255, 0.5);
      }
    }
    /*滚动条样式*/
    .content-div::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 2px; /*高宽分别对应横竖滚动条的尺寸*/
      height: 2px;
    }
    .content-div::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 5px;
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: rgba(255, 255, 255, 1);
    }
    .content-div::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 0;
      background: rgba(0, 0, 0, 0.1);
    }
    /* 进入系统点击按钮 */
    .getInto {
      width: 90px;
      height: 30px;
      font-size: 14px;
      text-align: center;
      line-height: 30px;
      background: #ffb500;
      border-radius: 4px;
      position: relative;
      margin: 0 auto;
      cursor: pointer;
    }
    .demoVideo {
      width: 120px;
      height: 30px;
      font-size: 16px;
      text-align: center;
      line-height: 30px;
      background: #1bbc9b;
      border-radius: 20px;
      position: relative;
      margin: 0 auto;
      margin-top: 10px;
      cursor: pointer;
    }
  }
  /* 没开通账号 */
  .no-opening {
    width: 390px;
    height: 200px;
    float: right;
    /* opacity: .5; */
    background: rgba(0, 0, 0, 0.5);
    position: relative;
    opacity: 0;
    transition: 1s;
    transform: translateX(300px);
    img {
      width: 29px;
      height: 37px;
      display: block;
      position: relative;
      margin: 0 auto;
      margin-top: 60px;
      margin-bottom: 15px;
    }
    p {
      font-size: 14px;
      color: #fff;
      position: relative;
      text-align: center;
    }
  }
  /* 大数据教学平台——动画效果 */
  .teaching-platform:hover .opening {
    opacity: 1;
    transition: 1s;
    transform: translateX(0px);
  }
  .teaching-platform:hover .no-opening {
    opacity: 1;
    transition: 1s;
    transform: translateX(0px);
  }
  /* 大数据实训平台——动画效果 */
  .training-platform:hover .opening {
    opacity: 1;
    transition: 1s;
    transform: translateX(0px);
  }
  .training-platform:hover .no-opening {
    opacity: 1;
    transition: 1s;
    transform: translateX(0px);
  }
  /* 大数据科研平台——动画效果 */
  .scientific-research-platform:hover .opening {
    opacity: 1;
    transition: 1s;
    transform: translateX(0px);
  }
  .scientific-research-platform:hover .no-opening {
    opacity: 1;
    transition: 1s;
    transform: translateX(0px);
  }
  /* 数据管理系统——动画效果 */
  .data-management:hover .opening {
    opacity: 1;
    transition: 1s;
    transform: translateX(0px);
  }
  .data-management:hover .no-opening {
    opacity: 1;
    transition: 1s;
    transform: translateX(0px);
  }
  /* 虚拟仿真——动画效果 */
  .xnfz-platform:hover .opening {
    opacity: 1;
    transition: 1s;
    transform: translateX(0px);
  }
  .xnfz-platform:hover .no-opening {
    opacity: 1;
    transition: 1s;
    transform: translateX(0px);
  }
  /* 智联网——动画效果 */
  .zlw-platform:hover .opening {
    opacity: 1;
    transition: 1s;
    transform: translateX(0px);
  }
  .zlw-platform:hover .no-opening {
    opacity: 1;
    transition: 1s;
    transform: translateX(0px);
  }
}
</style>
